React experimental_useFormState: Ein umfassender Leitfaden zur verbesserten Formularverwaltung

            // app/actions.js
'use server';

import { revalidatePath } from 'next/cache';
import { sendEmail } from './utils/email'; // Beispiel für eine E-Mail-Sendefunktion

export async function submitContactForm(prevState, formData) {
  const name = formData.get('name');
  const email = formData.get('email');
  const message = formData.get('message');

  // Grundlegende Validierung
  if (!name || !email || !message) {
    return 'Bitte füllen Sie alle Felder aus.';
  }

  try {
    await sendEmail({
      to: 'admin@example.com', // Ersetzen Sie dies durch Ihre Admin-E-Mail
      subject: 'Neue Kontaktformular-Übermittlung',
      text: `Name: ${name}\nE-Mail: ${email}\nNachricht: ${message}`,
    });

    revalidatePath('/'); // Startseite oder relevanter Pfad neu validieren
    return 'Vielen Dank für Ihre Nachricht!';
  } catch (error) {
    console.error('Fehler beim Senden der E-Mail:', error);
    return 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
  }
}

            

              
                Copy
              
            
          

            'use client';

import { experimental_useFormState as useFormState } from 'react';
import { submitContactForm } from './actions';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);

  return (
    

      

        Name:
        
      
      

        E-Mail:
        
      
      

        Nachricht:
              </div>
      <button type="submit">Senden</button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="J3VzZSBjbGllbnQnOwoKaW1wb3J0IHsgZXhwZXJpbWVudGFsX3VzZUZvcm1TdGF0ZSBhcyB1c2VGb3JtU3RhdGUgfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IHN1Ym1pdENvbnRhY3RGb3JtIH0gZnJvbSAnLi9hY3Rpb25zJzsKCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IFtzdGF0ZSwgZm9ybUFjdGlvbl0gPSB1c2VGb3JtU3RhdGUoc3VibWl0Q29udGFjdEZvcm0sIG51bGwpOwoKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtmb3JtQWN0aW9ufT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+TmFtZTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgcmVxdWlyZWQgLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj5FLU1haWw6PC9sYWJlbD4KICAgICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJlbWFpbCIgbmFtZT0iZW1haWwiIHJlcXVpcmVkIC8+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJtZXNzYWdlIj5OYWNocmljaHQ6PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIHJvd3M9IjQiIHJlcXVpcmVkIC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+U2VuZGVuPC9idXR0b24+CiAgICAgIHtzdGF0ZSAmJiA8cD57c3RhdGV9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Erklärung:</b></p>
<ul>
  <li>Die Direktive <code>'use client'</code> zeigt an, dass diese Komponente eine Client-Komponente ist.</li>
  <li>Wir importieren <code>experimental_useFormState</code> als <code>useFormState</code> zur Kürze und die <code>submitContactForm</code>-Aktion.</li>
  <li>Wir rufen <code>useFormState</code> auf und übergeben die <code>submitContactForm</code>-Aktion und einen anfänglichen Zustand von <code>null</code>.</li>
  <li>Der Hook gibt den aktuellen Zustand (<code>state</code>) und eine Funktion (<code>formAction</code>) zurück, die die Formularübermittlung auslöst.</li>
  <li>Wir hängen die Funktion <code>formAction</code> an das <code>action</code>-Prop des <code>form</code>-Elements an. Dies ist entscheidend dafür, dass React die Formularübermittlung korrekt behandelt.</li>
  <li>Das Formular enthält Eingabefelder für Name, E-Mail und Nachricht sowie einen Sende-Button.</li>
  <li>Die Zeile <code>{state && <p>{state}</p>}</code> zeigt dem Benutzer den aktuellen Zustand (Erfolgs- oder Fehlermeldung) an.</li>
</ul>

<h3>3. Einrichten Ihres E-Mail-Send services (sendEmail-Beispiel)</h3>

<p>Sie müssen die Funktion <code>sendEmail</code> implementieren. Hier ist ein Beispiel mit Nodemailer und einem Gmail-Konto (Hinweis: Die direkte Verwendung von Gmail in der Produktion wird generell nicht empfohlen. Verwenden Sie für Produktionsumgebungen einen dedizierten E-Mail-Dienst wie SendGrid, Mailgun oder AWS SES):</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// app/utils/email.js
import nodemailer from 'nodemailer';

export async function sendEmail({ to, subject, text }) {
  // Erstellen Sie ein Transportobjekt mit Gmail SMTP
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'your_gmail_address@gmail.com', // Ersetzen Sie dies durch Ihre Gmail-Adresse
      pass: 'your_gmail_password',       // Ersetzen Sie dies durch Ihr Gmail-Passwort oder App-Passwort
    },
  });

  // Definieren Sie die E-Mail-Optionen
  const mailOptions = {
    from: 'your_gmail_address@gmail.com',
    to: to,
    subject: subject,
    text: text,
  };

  // Senden Sie die E-Mail
  try {
    await transporter.sendMail(mailOptions);
    console.log('E-Mail erfolgreich gesendet');
  } catch (error) {
    console.error('Fehler beim Senden der E-Mail:', error);
    throw error; // Wirf den Fehler erneut, damit er in der Server-Aktion abgefangen wird
  }
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gYXBwL3V0aWxzL2VtYWlsLmpzCmltcG9ydCBub2RlbWFpbGVyIGZyb20gJ25vZGVtYWlsZXInOwoKZXhwb3J0IGFzeW5jIGZ1bmN0aW9uIHNlbmRFbWFpbCh7IHRvLCBzdWJqZWN0LCB0ZXh0IH0pIHsKICAvLyBFcnN0ZWxsZW4gU2llIGVpbiBUcmFuc3BvcnRvYmpla3QgbWl0IEdtYWlsIFNNVFAKICBjb25zdCB0cmFuc3BvcnRlciA9IG5vZGVtYWlsZXIuY3JlYXRlVHJhbnNwb3J0KHsKICAgIHNlcnZpY2U6ICdnbWFpbCcsCiAgICBhdXRoOiB7CiAgICAgIHVzZXI6ICd5b3VyX2dtYWlsX2FkZHJlc3NAZ21haWwuY29tJywgLy8gRXJzZXR6ZW4gU2llIGRpZXMgZHVyY2ggSWhyZSBHbWFpbC1BZHJlc3NlCiAgICAgIHBhc3M6ICd5b3VyX2dtYWlsX3Bhc3N3b3JkJywgICAgICAgLy8gRXJzZXR6ZW4gU2llIGRpZXMgZHVyY2ggSWhyIEdtYWlsLVBhc3N3b3J0IG9kZXIgQXBwLVBhc3N3b3J0CiAgICB9LAogIH0pOwoKICAvLyBEZWZpbmllcmVuIFNpZSBkaWUgRS1NYWlsLU9wdGlvbmVuCiAgY29uc3QgbWFpbE9wdGlvbnMgPSB7CiAgICBmcm9tOiAneW91cl9nbWFpbF9hZGRyZXNzQGdtYWlsLmNvbScsCiAgICB0bzogdG8sCiAgICBzdWJqZWN0OiBzdWJqZWN0LAogICAgdGV4dDogdGV4dCwKICB9OwoKICAvLyBTZW5kZW4gU2llIGRpZSBFLU1haWwKICB0cnkgewogICAgYXdhaXQgdHJhbnNwb3J0ZXIuc2VuZE1haWwobWFpbE9wdGlvbnMpOwogICAgY29uc29sZS5sb2coJ0UtTWFpbCBlcmZvbGdyZWljaCBnZXNlbmRldCcpOwogIH0gY2F0Y2ggKGVycm9yKSB7CiAgICBjb25zb2xlLmVycm9yKCdGZWhsZXIgYmVpbSBTZW5kZW4gZGVyIEUtTWFpbDonLCBlcnJvcik7CiAgICB0aHJvdyBlcnJvcjsgLy8gV2lyZiBkZW4gRmVobGVyIGVybmV1dCwgZGFtaXQgZXIgaW4gZGVyIFNlcnZlci1Ba3Rpb24gYWJnZWZhbmdlbiB3aXJkCiAgfQp9Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p><b>Wichtiger Sicherheitshinweis:</b> Speichern Sie niemals Ihr tatsächliches Gmail-Passwort direkt in Ihrem Code! Verwenden Sie Umgebungsvariablen für sensible Informationen. Verwenden Sie für die Produktion ein App-Passwort, das speziell für Nodemailer erstellt wurde, und vermeiden Sie die Verwendung Ihres Haupt-Gmail-Passworts. Dedizierte E-Mail-Send Dienste bieten eine bessere Zustellbarkeit und Sicherheit im Vergleich zur direkten Verwendung von Gmail.</p>

<h3>4. Ausführen des Beispiels</h3>

<p>Stellen Sie sicher, dass Sie die erforderlichen Abhängigkeiten installiert haben:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>npm install nodemailer
</code>
            <div class="copy-button-container">
              <button 
                data-code="bnBtIGluc3RhbGwgbm9kZW1haWxlcgo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>oder</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>yarn add nodemailer
</code>
            <div class="copy-button-container">
              <button 
                data-code="eWFybiBhZGQgbm9kZW1haWxlcgo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Starten Sie dann Ihren Next.js Entwicklungsserver:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>npm run dev
</code>
            <div class="copy-button-container">
              <button 
                data-code="bnBtIHJ1biBkZXYK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>oder</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>yarn dev
</code>
            <div class="copy-button-container">
              <button 
                data-code="eWFybiBkZXYK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>Öffnen Sie Ihren Browser und navigieren Sie zu der Seite, die die <code>ContactForm</code>-Komponente enthält. Füllen Sie das Formular aus und senden Sie es ab. Sie sollten entweder die Erfolgsmeldung oder eine Fehlermeldung unter dem Formular sehen. Überprüfen Sie Ihr E-Mail-Postfach, um zu bestätigen, dass die E-Mail erfolgreich gesendet wurde.</p>

<h2>Erweiterte Nutzung und Überlegungen</h2>

<h3>1. Behandlung von Ladezuständen</h3>

<p>Um eine bessere Benutzererfahrung zu bieten, ist es wichtig anzuzeigen, wann das Formular gesendet wird. Während <code>experimental_useFormState</code> keinen Ladezustand direkt exponiert, können Sie diesen manuell mit dem <code>useTransition</code> Hook von React in Verbindung mit der <code>formAction</code> verwalten.</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

  return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">Name:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">E-Mail:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">Nachricht:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Wird gesendet...' : 'Senden'}
      </button>
      {state && <p>{state}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="J3VzZSBjbGllbnQnOwoKaW1wb3J0IHsgZXhwZXJpbWVudGFsX3VzZUZvcm1TdGF0ZSBhcyB1c2VGb3JtU3RhdGUsIHVzZVRyYW5zaXRpb24gfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IHN1Ym1pdENvbnRhY3RGb3JtIH0gZnJvbSAnLi9hY3Rpb25zJzsKCmZ1bmN0aW9uIENvbnRhY3RGb3JtKCkgewogIGNvbnN0IFtzdGF0ZSwgZm9ybUFjdGlvbl0gPSB1c2VGb3JtU3RhdGUoc3VibWl0Q29udGFjdEZvcm0sIG51bGwpOwogIGNvbnN0IFtpc1BlbmRpbmcsIHN0YXJ0VHJhbnNpdGlvbl0gPSB1c2VUcmFuc2l0aW9uKCk7CgogIGNvbnN0IGhhbmRsZVN1Ym1pdCA9IGFzeW5jIChmb3JtRGF0YSkgPT4gewogICAgc3RhcnRUcmFuc2l0aW9uKCgpID0+IHsKICAgICAgZm9ybUFjdGlvbihmb3JtRGF0YSk7CiAgICB9KTsKICB9OwoKICByZXR1cm4gKAogICAgPGZvcm0gYWN0aW9uPXtoYW5kbGVTdWJtaXR9PgogICAgICA8ZGl2PgogICAgICAgIDxsYWJlbCBodG1sRm9yPSJuYW1lIj5OYW1lOjwvbGFiZWw+CiAgICAgICAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiBuYW1lPSJuYW1lIiByZXF1aXJlZCAvPgogICAgICA8L2Rpdj4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0iZW1haWwiPkUtTWFpbDo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgcmVxdWlyZWQgLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPk5hY2hyaWNodDo8L2xhYmVsPgogICAgICAgIDx0ZXh0YXJlYSBpZD0ibWVzc2FnZSIgbmFtZT0ibWVzc2FnZSIgcm93cz0iNCIgcmVxdWlyZWQgLz4KICAgICAgPC9kaXY+CiAgICAgIDxidXR0b24gdHlwZT0ic3VibWl0IiBkaXNhYmxlZD17aXNQZW5kaW5nfT4KICAgICAgICB7aXNQZW5kaW5nID8gJ1dpcmQgZ2VzZW5kZXQuLi4nIDogJ1NlbmRlbid9CiAgICAgIDwvYnV0dG9uPgogICAgICB7c3RhdGUgJiYgPHA+e3N0YXRlfTwvcD59CiAgICA8L2Zvcm0+CiAgKTsKfQoKZXhwb3J0IGRlZmF1bHQgQ29udGFjdEZvcm07Cg=="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<p>In diesem Beispiel:</p>

<ul>
  <li>Wir importieren <code>useTransition</code> von 'react'.</li>
  <li>Wir rufen <code>useTransition</code> auf, um den <code>isPending</code>-Status und die <code>startTransition</code>-Funktion zu erhalten.</li>
  <li>Wir umschließen den Aufruf von <code>formAction</code> innerhalb von <code>startTransition</code>. Dies weist React an, die Formularübermittlung als Übergang zu behandeln, sodass sie bei Bedarf unterbrochen werden kann.</li>
  <li>Wir deaktivieren den Sende-Button, solange <code>isPending</code> wahr ist, und ändern den Button-Text zu „Wird gesendet...“.</li>
</ul>

<h3>2. Fehlerbehandlung und Validierung</h3>

<p>Eine robuste Fehlerbehandlung ist entscheidend für eine gute Benutzererfahrung. Die Server-Aktion sollte eine gründliche Validierung durchführen und dem Client aussagekräftige Fehlermeldungen zurückgeben. Die Client-Komponente kann diese Meldungen dann dem Benutzer anzeigen.</p>

<p><b>Serverseitige Validierung:</b> Validieren Sie Daten immer auf dem Server, um böswillige Eingaben zu verhindern und die Datenintegrität sicherzustellen. Verwenden Sie Bibliotheken wie Zod oder Yup für die Schema-Validierung.</p>

<p><b>Clientseitige Validierung (Optional):</b> Obwohl serverseitige Validierung unerlässlich ist, kann clientseitige Validierung dem Benutzer sofortiges Feedback geben und die Benutzererfahrung verbessern. Clientseitige Validierung sollte jedoch niemals als alleinige Wahrheitsquelle herangezogen werden.</p>

<h3>3. Optimistische Aktualisierungen</h3>

<p>Optimistische Aktualisierungen können Ihre Anwendung reaktionsfähiger erscheinen lassen, indem die Benutzeroberfläche sofort aktualisiert wird, als ob die Formularübermittlung erfolgreich gewesen wäre, noch bevor der Server dies bestätigt. Seien Sie jedoch darauf vorbereitet, Fehler zu behandeln und die Änderungen rückgängig zu machen, wenn die Übermittlung fehlschlägt.</p>

<p>Mit <code>experimental_useFormState</code> können Sie optimistische Aktualisierungen implementieren, indem Sie den lokalen Zustand basierend auf den Formulardaten aktualisieren, bevor Sie die <code>formAction</code> aufrufen. Wenn die Server-Aktion fehlschlägt, können Sie die Änderungen basierend auf der vom Hook zurückgegebenen Fehlermeldung rückgängig machen.</p>

<h3>4. Revalidierung und Caching</h3>

<p>React Server Components und Actions nutzen Caching zur Leistungssteigerung. Wenn eine Formularübermittlung Daten ändert, ist es wichtig, den Cache neu zu validieren, um sicherzustellen, dass die Benutzeroberfläche die neuesten Änderungen widerspiegelt.</p>

<p>Die Funktionen <code>revalidatePath</code> und <code>revalidateTag</code> aus <code>next/cache</code> können verwendet werden, um bestimmte Teile des Caches zu invalidieren. Im <code>submitContactForm</code>-Beispiel wird <code>revalidatePath('/')</code> verwendet, um die Startseite nach einer erfolgreichen Formularübermittlung neu zu validieren.</p>

<h3>5. Internationalisierung (i18n)</h3>

<p>Beim Erstellen von Anwendungen für ein globales Publikum ist die Internationalisierung (i18n) entscheidend. Dazu gehört die Anpassung Ihrer Anwendung an verschiedene Sprachen, Regionen und kulturelle Vorlieben.</p>

<p>Für Formulare bedeutet dies die Bereitstellung lokalisierter Bezeichnungen, Fehlermeldungen und Validierungsregeln. Verwenden Sie i18n-Bibliotheken wie <code>next-intl</code> oder <code>react-i18next</code>, um Übersetzungen zu verwalten und Daten entsprechend der Locale des Benutzers zu formatieren.</p>

<p>Beispiel mit <code>next-intl</code>:</p>


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// i18n.js (Beispiel)
import { createTranslator } from 'next-intl';

const messages = {
  en: {
    ContactForm: {
      NameLabel: 'Name',
      EmailLabel: 'Email',
      MessageLabel: 'Message',
      SubmitButton: 'Submit',
      SuccessMessage: 'Thank you for your message!',
      ErrorMessage: 'An error occurred. Please try again later.',
      NameRequired: 'Name is required',
      EmailRequired: 'Email is required',
      MessageRequired: 'Message is required',
    },
  },
  es: {
    ContactForm: {
      NameLabel: 'Nombre',
      EmailLabel: 'Correo electrónico',
      MessageLabel: 'Mensaje',
      SubmitButton: 'Enviar',
      SuccessMessage: '¡Gracias por tu mensaje!',
      ErrorMessage: 'Ocurrió un error. Inténtalo de nuevo más tarde.',
      NameRequired: 'El nombre es obligatorio',
      EmailRequired: 'El correo electrónico es obligatorio',
      MessageRequired: 'El mensaje es obligatorio',
    },
  },
  // Fügen Sie bei Bedarf weitere Sprachen hinzu
};

export async function getTranslations(locale) {
  return createTranslator({ locale, messages });
}
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gaTE4bi5qcyAoQmVpc3BpZWwpCmltcG9ydCB7IGNyZWF0ZVRyYW5zbGF0b3IgfSBmcm9tICduZXh0LWludGwnOwoKY29uc3QgbWVzc2FnZXMgPSB7CiAgZW46IHsKICAgIENvbnRhY3RGb3JtOiB7CiAgICAgIE5hbWVMYWJlbDogJ05hbWUnLAogICAgICBFbWFpbExhYmVsOiAnRW1haWwnLAogICAgICBNZXNzYWdlTGFiZWw6ICdNZXNzYWdlJywKICAgICAgU3VibWl0QnV0dG9uOiAnU3VibWl0JywKICAgICAgU3VjY2Vzc01lc3NhZ2U6ICdUaGFuayB5b3UgZm9yIHlvdXIgbWVzc2FnZSEnLAogICAgICBFcnJvck1lc3NhZ2U6ICdBbiBlcnJvciBvY2N1cnJlZC4gUGxlYXNlIHRyeSBhZ2FpbiBsYXRlci4nLAogICAgICBOYW1lUmVxdWlyZWQ6ICdOYW1lIGlzIHJlcXVpcmVkJywKICAgICAgRW1haWxSZXF1aXJlZDogJ0VtYWlsIGlzIHJlcXVpcmVkJywKICAgICAgTWVzc2FnZVJlcXVpcmVkOiAnTWVzc2FnZSBpcyByZXF1aXJlZCcsCiAgICB9LAogIH0sCiAgZXM6IHsKICAgIENvbnRhY3RGb3JtOiB7CiAgICAgIE5hbWVMYWJlbDogJ05vbWJyZScsCiAgICAgIEVtYWlsTGFiZWw6ICdDb3JyZW8gZWxlY3Ry825pY28nLAogICAgICBNZXNzYWdlTGFiZWw6ICdNZW5zYWplJywKICAgICAgU3VibWl0QnV0dG9uOiAnRW52aWFyJywKICAgICAgU3VjY2Vzc01lc3NhZ2U6ICehR3JhY2lhcyBwb3IgdHUgbWVuc2FqZSEnLAogICAgICBFcnJvck1lc3NhZ2U6ICdPY3VycmnzIHVuIGVycm9yLiBJbnTpbnRhbG8gZGUgbnVldm8gbeFzIHRhcmRlLicsCiAgICAgIE5hbWVSZXF1aXJlZDogJ0VsIG5vbWJyZSBlcyBvYmxpZ2F0b3JpbycsCiAgICAgIEVtYWlsUmVxdWlyZWQ6ICdFbCBjb3JyZW8gZWxlY3Ry825pY28gZXMgb2JsaWdhdG9yaW8nLAogICAgICBNZXNzYWdlUmVxdWlyZWQ6ICdFbCBtZW5zYWplIGVzIG9ibGlnYXRvcmlvJywKICAgIH0sCiAgfSwKICAvLyBG/GdlbiBTaWUgYmVpIEJlZGFyZiB3ZWl0ZXJlIFNwcmFjaGVuIGhpbnp1Cn07CgpleHBvcnQgYXN5bmMgZnVuY3Rpb24gZ2V0VHJhbnNsYXRpb25zKGxvY2FsZSkgewogIHJldHVybiBjcmVhdGVUcmFuc2xhdG9yKHsgbG9jYWxlLCBtZXNzYWdlcyB9KTsKfQo="
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      


        <div class="code-block-wrapper">
          <pre data-language="code">
            <code>// ContactForm.js
'use client';

import { experimental_useFormState as useFormState, useTransition } from 'react';
import { submitContactForm } from './actions';
import { useLocale, useTranslations } from 'next-intl';

function ContactForm() {
  const [state, formAction] = useFormState(submitContactForm, null);
  const [isPending, startTransition] = useTransition();
  const t = useTranslations('ContactForm');

  const handleSubmit = async (formData) => {
    startTransition(() => {
      formAction(formData);
    });
  };

  return (
    <form action={handleSubmit}>
      <div>
        <label htmlFor="name">{t('NameLabel')}:</label>
        <input type="text" id="name" name="name" required />
      </div>
      <div>
        <label htmlFor="email">{t('EmailLabel')}:</label>
        <input type="email" id="email" name="email" required />
      </div>
      <div>
        <label htmlFor="message">{t('MessageLabel')}:</label>
        <textarea id="message" name="message" rows="4" required />
      </div>
      <button type="submit" disabled={isPending}>
        {isPending ? 'Wird gesendet...' : t('SubmitButton')}
      </button>
      {state && <p>{state === 'Thank you for your message!' ? t('SuccessMessage') : t('ErrorMessage')}</p>}
    </form>
  );
}

export default ContactForm;
</code>
            <div class="copy-button-container">
              <button 
                data-code="Ly8gQ29udGFjdEZvcm0uanMKJ3VzZSBjbGllbnQnOwoKaW1wb3J0IHsgZXhwZXJpbWVudGFsX3VzZUZvcm1TdGF0ZSBhcyB1c2VGb3JtU3RhdGUsIHVzZVRyYW5zaXRpb24gfSBmcm9tICdyZWFjdCc7CmltcG9ydCB7IHN1Ym1pdENvbnRhY3RGb3JtIH0gZnJvbSAnLi9hY3Rpb25zJzsKaW1wb3J0IHsgdXNlTG9jYWxlLCB1c2VUcmFuc2xhdGlvbnMgfSBmcm9tICduZXh0LWludGwnOwoKZnVuY3Rpb24gQ29udGFjdEZvcm0oKSB7CiAgY29uc3QgW3N0YXRlLCBmb3JtQWN0aW9uXSA9IHVzZUZvcm1TdGF0ZShzdWJtaXRDb250YWN0Rm9ybSwgbnVsbCk7CiAgY29uc3QgW2lzUGVuZGluZywgc3RhcnRUcmFuc2l0aW9uXSA9IHVzZVRyYW5zaXRpb24oKTsKICBjb25zdCB0ID0gdXNlVHJhbnNsYXRpb25zKCdDb250YWN0Rm9ybScpOwoKICBjb25zdCBoYW5kbGVTdWJtaXQgPSBhc3luYyAoZm9ybURhdGEpID0+IHsKICAgIHN0YXJ0VHJhbnNpdGlvbigoKSA9PiB7CiAgICAgIGZvcm1BY3Rpb24oZm9ybURhdGEpOwogICAgfSk7CiAgfTsKCiAgcmV0dXJuICgKICAgIDxmb3JtIGFjdGlvbj17aGFuZGxlU3VibWl0fT4KICAgICAgPGRpdj4KICAgICAgICA8bGFiZWwgaHRtbEZvcj0ibmFtZSI+e3QoJ05hbWVMYWJlbCcpfTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0ibmFtZSIgbmFtZT0ibmFtZSIgcmVxdWlyZWQgLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9ImVtYWlsIj57dCgnRW1haWxMYWJlbCcpfTo8L2xhYmVsPgogICAgICAgIDxpbnB1dCB0eXBlPSJlbWFpbCIgaWQ9ImVtYWlsIiBuYW1lPSJlbWFpbCIgcmVxdWlyZWQgLz4KICAgICAgPC9kaXY+CiAgICAgIDxkaXY+CiAgICAgICAgPGxhYmVsIGh0bWxGb3I9Im1lc3NhZ2UiPnt0KCdNZXNzYWdlTGFiZWwnKX06PC9sYWJlbD4KICAgICAgICA8dGV4dGFyZWEgaWQ9Im1lc3NhZ2UiIG5hbWU9Im1lc3NhZ2UiIHJvd3M9IjQiIHJlcXVpcmVkIC8+CiAgICAgIDwvZGl2PgogICAgICA8YnV0dG9uIHR5cGU9InN1Ym1pdCIgZGlzYWJsZWQ9e2lzUGVuZGluZ30+CiAgICAgICAge2lzUGVuZGluZyA/ICdXaXJkIGdlc2VuZGV0Li4uJyA6IHQoJ1N1Ym1pdEJ1dHRvbicpfQogICAgICA8L2J1dHRvbj4KICAgICAge3N0YXRlICYmIDxwPntzdGF0ZSA9PT0gJ1RoYW5rIHlvdSBmb3IgeW91ciBtZXNzYWdlIScgPyB0KCdTdWNjZXNzTWVzc2FnZScpIDogdCgnRXJyb3JNZXNzYWdlJyl9PC9wPn0KICAgIDwvZm9ybT4KICApOwp9CgpleHBvcnQgZGVmYXVsdCBDb250YWN0Rm9ybTsK"
                class="copy-button"
                title="Copy code"
              >
                Copy
              </button>
            </div>
          </pre>
        </div>
      

<h3>6. Barrierefreiheit (a11y)</h3>

<p>Barrierefreiheit ist entscheidend, um sicherzustellen, dass Ihre Anwendung für alle Benutzer, einschließlich Menschen mit Behinderungen, nutzbar ist. Berücksichtigen Sie bei der Erstellung von Formularen die folgenden Barrierefreiheitsrichtlinien:</p>

<ul>
  <li><b>Verwenden Sie semantisches HTML:</b> Verwenden Sie geeignete HTML-Elemente wie <code><label></code>, <code><input></code> und <code><textarea></code>, um Struktur und Bedeutung für Ihr Formular bereitzustellen.</li>
  <li><b>Stellen Sie Bezeichnungen für alle Formularfelder bereit:</b> Verknüpfen Sie Bezeichnungen mit Formularfeldern mithilfe des <code>for</code>-Attributs im <code><label></code>-Element und des <code>id</code>-Attributs im Formularfeld.</li>
  <li><b>Verwenden Sie ARIA-Attribute:</b> Verwenden Sie ARIA-Attribute, um assistierenden Technologien zusätzliche Informationen über die Struktur und das Verhalten des Formulars bereitzustellen.</li>
  <li><b>Sorgen Sie für ausreichenden Farbkontrast:</b> Verwenden Sie einen ausreichenden Farbkontrast zwischen Text- und Hintergrundfarben, um die Lesbarkeit für Menschen mit Sehstörungen zu gewährleisten.</li>
  <li><b>Bieten Sie Tastaturnavigation:</b> Stellen Sie sicher, dass Benutzer das Formular nur mit der Tastatur navigieren können.</li>
  <li><b>Testen Sie mit assistierenden Technologien:</b> Testen Sie Ihr Formular mit assistierenden Technologien, wie z. B. Screenreadern, um sicherzustellen, dass es für Menschen mit Behinderungen zugänglich ist.</li>
</ul>

<h2>Globale Überlegungen und Best Practices</h2>

<h3>1. Zeitzonen</h3>

<p>Bei der Arbeit mit Datums- und Zeitangaben in Formularen ist es wichtig, Zeitzonen zu berücksichtigen. Speichern Sie Datums- und Zeitangaben im UTC-Format auf dem Server und konvertieren Sie sie auf dem Client in die lokale Zeitzone des Benutzers.</p>

<h3>2. Währungen</h3>

<p>Bei der Arbeit mit Geldbeträgen in Formularen ist es wichtig, Währungen korrekt zu behandeln. Verwenden Sie eine Bibliothek zur Währungsformatierung, um Werte entsprechend der Locale des Benutzers zu formatieren und das entsprechende Währungssymbol anzuzeigen.</p>

<h3>3. Adressen</h3>

<p>Adressformate variieren stark zwischen verschiedenen Ländern. Verwenden Sie eine Bibliothek, die internationale Adressformate unterstützt, um sicherzustellen, dass Benutzer ihre Adressen korrekt eingeben können.</p>

<h3>4. Telefonnummern</h3>

<p>Telefonnummernformate variieren ebenfalls zwischen verschiedenen Ländern. Verwenden Sie eine Bibliothek zur Formatierung von Telefonnummern, um Telefonnummern entsprechend der Locale des Benutzers zu formatieren und zu validieren, dass es sich um gültige Telefonnummern handelt.</p>

<h3>5. Datenschutz und Compliance</h3>

<p>Beachten Sie Datenschutzbestimmungen wie die DSGVO und den CCPA bei der Erfassung und Verarbeitung von Formulardaten. Holen Sie die Zustimmung der Benutzer ein, bevor Sie deren Daten sammeln, und geben Sie ihnen die Möglichkeit, auf ihre Daten zuzugreifen, sie zu ändern und zu löschen.</p>

<h2>Fazit</h2>

<p>Der <code>experimental_useFormState</code> Hook bietet einen vielversprechenden Ansatz zur Vereinfachung der Formularverwaltung in React-Anwendungen. Durch die Nutzung von Server Actions und die Übernahme eines deklarativen Stils können Entwickler effizientere, wartbarere und benutzerfreundlichere Formulare erstellen. Obwohl <code>experimental_useFormState</code> noch in einem experimentellen Stadium ist, birgt es ein erhebliches Potenzial zur Optimierung von Formular-Workflows und zur Verbesserung der gesamten React-Entwicklungserfahrung. Durch die Befolgung der in diesem Leitfaden beschriebenen Best Practices können Sie die Leistungsfähigkeit von <code>experimental_useFormState</code> effektiv nutzen, um robuste und skalierbare Formularlösungen für Ihre Anwendungen zu erstellen.</p>

<p>Denken Sie daran, sich immer über die neuesten React-Dokumentationen und Community-Diskussionen auf dem Laufenden zu halten, während sich die API vom experimentellen zum stabilen Zustand entwickelt.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormState</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Formularverwaltung</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Formularzustand</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">experimentelle API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Forms</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Server Actions</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React Hook</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Formularoptimierung</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asynchrone Formulare</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Datenmutationen</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI-Updates</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RC("B:1","S:1")</script></body></html>